<!-- 合同阶段 -->
<template>
	<div style="overflow-x: auto;">
		<base-table ref="customtable" :border="true" :showIndex="true" :tabLoading.sync="tabLoading" :tableData="tableData"
			:tableColumn="tableColumn" :funData="[]" :indexOperate="true" @onCellClick="getCell"
			@onSelectionChange="getSelect" @radioChange="singleSelection" @newRow="add">
			<!--  单选  -->
			<!-- <template v-slot:option="{ row }">
				<el-radio v-model="radio" :label="row.$index" @click="radioChange"></el-radio>
			</template> -->
			<!--  序号  -->
			<template v-slot:index="{ row }">
				<span>{{ row.$index + 1 }}</span>
			</template>
			<!--  阶段名称  -->
			<template v-slot:phaseID="{ row }">
				<el-select v-model="row.phaseID" placeholder="请选择" width="100%" @change="change">
					<el-option v-for="item in phaseOptions" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
			</template>
			<!--  执行内容  -->
			<template v-slot:phaseContent="{ row }">
				<el-input v-model="row.phaseContent" clearable type="text"></el-input>
			</template>
			<!--  功能模块  -->
			<template v-slot:projectModule="{ row }">
				<el-input v-model="row.projectModule" clearable type="text"></el-input>
			</template>
			<!--  功能模块内容  -->
			<template v-slot:projectModuleContent="{ row }">
				<el-input v-model="row.projectModuleContent" clearable type="text"></el-input>
			</template>
			<!--  计划开始日期  -->
			<template v-slot:planStartDate="{ row }" style="text-align: right;">
				<el-date-picker v-model="row.planStartDate" align="right" type="date" placeholder="选择日期"
					value-format="yyyy-MM-dd">
				</el-date-picker>
			</template>
			<!--  计划完成日期  -->
			<template v-slot:planEendDate="{ row }" style="text-align: right;">
				<el-date-picker v-model="row.planEendDate" align="right" type="date" placeholder="选择日期"
					value-format="yyyy-MM-dd">
				</el-date-picker>
			</template>
			<!--  实际开始日期  -->
			<template v-slot:realityStartDate="{ row }" style="text-align: right;">
				<el-date-picker v-model="row.realityStartDate" align="right" type="date" placeholder="选择日期"
					value-format="yyyy-MM-dd">
				</el-date-picker>
			</template>
			<!--  实际完成日期  -->
			<template v-slot:realityEndDate="{ row }" style="text-align: right;">
				<el-date-picker v-model="row.realityEndDate" align="right" type="date" placeholder="选择日期"
					value-format="yyyy-MM-dd">
				</el-date-picker>
			</template>
			<!--  预警天数  -->
			<template v-slot:warningDays="{ row }">
				<el-input v-model="row.warningDays" clearable @input="(v) => (row.warininDays = v.replace(/[^\d]/g, ''))">
				</el-input>
			</template>
			<!-- 状态 -->
			<template v-slot:state="{ row }">
				<el-select v-model="row.state" placeholder="请选择" width="100%">
					<el-option v-for="item in stateOptions" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
			</template>
			<!--  完成反馈内容  -->
			<template v-slot:realityContent="{ row }">
				<el-input v-model="row.realityContent" clearable type="text"></el-input>
			</template>
			<!--  责任工程师  -->
			<template v-slot:affiliatedPersons="{ row }">
				<el-select v-model="row.affiliatedPersons" multiple placeholder="请选择" width="100%" @change="change">
					<el-option v-for="item in personList" :key="item.value" :label="item.value" :value="item.value">
					</el-option>
				</el-select>
			</template>
			<!--备注  -->
			<template v-slot:remark="{ row }">
				<el-input v-model="row.remark" clearable type="text"></el-input>
			</template>
			<template v-slot:operate="{ row }">
				<el-tooltip class="item" effect="dark" content="删除当前行" placement="top">
					<i class="el-icon-delete" style="color: red; font-size: 16px; margin-right: 10px" @click="del(row)"></i>
				</el-tooltip>
				<el-tooltip class="item" effect="dark" content="复制当前行" placement="top">
					<i class="el-icon-document-copy" style="color: #1f63ff; font-size: 16px" @click="duplicate(row)"></i>
				</el-tooltip>
			</template>
		</base-table>
	</div>
</template>

<script>
import baseTable from "@/components/base/baseTable";
import basePage from '@/components/base/basePage'
import baseChoice from "@/components/base/baseChoice/index.vue";
import baseDialog from "@/components/base/BaseNewDialog/index.vue";
import configData from "./configData";
import { OrganGetContract, OrganDelContractDetail } from "@/api/apis/organization";
import { dataDictionaryGetBillList } from "@/api/apis/dataDictionary";
import { projectList, projectDetailData, projectSaveData, projectDelData, projectProMemberDelData, projectProPhaseDelData } from "@/api/apis/projectManagement";
export default {
	components: {
		baseTable,
		basePage,
		baseDialog,
		baseChoice
	},
	props: {
		//项目组成员
		infos: {
			type: Array,
			default: () => {
				return []
			}
		},
	},
	data() {
		return {
			loading: false,
			optionIndex: '',
			equipmentData: [{
				invCode: '阶段编码',
				name: '阶段名称',
				invName: '执行内容'
			}],

			tabLoading: false,
			optionData: {},
			radio: false,
			tableData: [],
			personList: [],//项目组成员
			phaseOptions: [],
			stateOptions: [],
			tableColumn: [
				{//
					label: '阶段名称',
					prop: 'phaseID',
					tooltip: true,
					width: '130',
				},
				{
					label: '阶段执行内容',
					prop: 'phaseContent',
					tooltip: true,
					width: '200',
				},
				// {//下拉
				// 	label: '合同号',
				// 	prop: 'detail_person',
				// 	tooltip: true,
				// },
				{
					label: '功能模块',
					prop: 'projectModule',
					tooltip: true,
					width: '120',
				},
				{
					label: '模块内容',
					prop: 'projectModuleContent',
					tooltip: true,
					width: '180',

				},
				{
					label: '计划开始日期',
					prop: 'planStartDate',
					tooltip: true,
					width: '160',

				},
				{
					label: '计划完成日期',
					prop: 'planEendDate',
					tooltip: true,
					width: '160',

				},
				{
					label: '实际开始日期',
					prop: 'realityStartDate',
					tooltip: true,
					width: '160',

				}, {
					label: '实际完成日期',
					prop: 'realityEndDate',
					tooltip: true,
					width: '160',

				},
				{
					label: '预警天数',
					prop: 'warningDays',
					tooltip: true,
					width: "100",
				},
				{
					label: '阶段状态',
					prop: 'state',
					tooltip: true,
					width: '130',
				},
				{
					label: '完成反馈内容',
					prop: 'realityContent',
					tooltip: true,
					width: '150',

				},
				{
					label: '备注',
					prop: 'remark',
					tooltip: true,
					width: '150',

				},
				{//下拉
					label: '责任工程师',
					prop: 'affiliatedPersons',
					tooltip: true,
					width: '200',

				},
				{
					label: "操作",
					prop: "operate",
					width: "80",
					fixed: "right",
				},
			],
			pageModel: {
				page: 1, //当前页码
				limit: 10, //每页显示多少
				cusClassify: "", //树形分类id
				sequence: "", //排列方式
				sequenceName: "", //需要排列的字段名
			},
			choiceIndex: 'false',
			selectRow: {}
		}
	},
	mounted() {
		this.init()
	},
	watch: {
		tableData: {
			deep: true,
			handler(newVal, oldVal) {
				this.$emit("callBackInfo", newVal)
				console.log(newVal, "newVal");
			}
		},
		infos: {
			handler(newVal, oldVal) {
				let personList = []
				newVal.forEach(el => {
					let arr = {
						// label: el.personName,
						value: el.personName,
					};
					personList.push(arr);
				})
				this.personList = personList
				// console.log(this.personList, "this.personList");
			}
		}
	},
	methods: {
		change() {
			console.log(this.personList.affiliatedPersons);
		},
		init() {
			this.getProjectPhaseList()
			this.getProjectStateList()
		},
		// 树状图点击事件
		handleNodeClick(data) {
			// this.organizationForm = {
			// 	o_OrganCode: data.o_OrganCode,
			// 	ParentOrganName: data.label,
			// }
			// this.propvalue = data.label
			// console.log(data)
		},

		async OrganGetContract() {
			const res = await OrganGetContract({
				...this.pageModel,
			});
			if (res.success == "true") {
				this.$nextTick(() => {
					this.$refs.choice.setPageTotal(res.data[0]);
				});
				this.equipmentData = res.data[1];
			}
		},

		// 单元格点击事件
		getCell(row, label) {
			this.selectRow = row;
		},
		// 表格多选
		getSelect(selectTable) {
			this.selectTable = selectTable
		},
		radioChange(val) {
			this.optionData = val
			this.radio = val.index
		},
		singleSelection(val) {
			this.choiceIndex = val.index
		},
		// 获取项目阶段 数据字典
		async getProjectPhaseList() {
			let params = {
				KindId: 24,
				page: 1,
				limit: 999,
				sequence: "",
				sequenceName: "",
			};
			let res = await dataDictionaryGetBillList(params);
			if (res.code == 1) {
				let arrList = [];
				if (res.data[0] > 0) {
					res.data[1].forEach((el) => {
						let arr = {
							label: el.ddd_DicDetailsName,
							value: el.ddd_DicDetailsID,
						};
						arrList.push(arr);
					});
				}
				this.phaseOptions = arrList;
			}
		},
		// 获取项目状态 数据字典
		async getProjectStateList() {
			let params = {
				KindId: 51,
				page: 1,
				limit: 999,
				sequence: "",
				sequenceName: "",
			};
			let res = await dataDictionaryGetBillList(params);
			if (res.code == 1) {
				let arrList = [];
				if (res.data[0] > 0) {
					res.data[1].forEach((el) => {
						let arr = {
							label: el.ddd_DicDetailsName,
							value: el.ddd_DicDetailsID,
						};
						arrList.push(arr);
					});
				}
				this.stateOptions = arrList;
			}
		},
		//添加
		add() {
			let arr = {}
			this.tableData.push(arr)
		},
		async del(row) {
			this.$confirm('确认删除该明细吗?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				if (row.mainID && this.$route.query.name == '编辑合同') {
					projectProPhaseDelData({ id: row.detail_ID }).then(res => {
						if (res.success == "true") {
							this.$emit("renovate");
							this.$message({
								message: "删除成功",
								type: "success",
							});
							this.tableData.splice(row.index, 1);
							this.$emit('renew')
						}
					})
				} else {
					this.tableData.splice(row.index, 1);
				}
			}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消删除'
				});
			});
		},
		duplicate(row) {
			let data = {
				...row,
				detail_ID: null
			}
			this.tableData.push(JSON.parse(JSON.stringify(data)));
		},
	}
}
</script>

<style>
.el-table th>.cell {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;

}
</style>
<style scoped lang="scss">
>>>.el-radio__label {
	// display: none;
}

::v-deep .el-select__tags {
	flex-wrap: nowrap;
}

.iconButton {
	padding: 10px 12px;
	color: white;
	margin: 5px;
}

.iconButton.add {
	background-color: #409eff !important;
}

.iconButton.del {
	background-color: #f56c6c !important;
}
</style>
